<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compaatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title>Document</title>
        <link rel="stylesheet" href="./css/reset.css"/>
        <link rel="stylesheet" href="./css/header.css"/>
        <link rel="stylesheet" href="./css/common.css"/>
        <link rel="stylesheet" href="./css/product-monitor.css"/>
    </head>

    <body>
    <div class="app-header">
        <div class="header__main">
            <section>
                <a class="section__logo"><img src="./images/logo.png" alt="" /></a>
                <a>总览</a>
                <a class="section__arrow">云产品</a>
            </section>
            <section>
                <a class="section__search"><input type="text" placeholder="搜索你想要的内容…" /><img src="./images/icon-search.png" alt="" /></a>
                <a class="section__wx"><img src="./images/icon-wx.png" alt="" /><span>小程序</span></a>
                <a class="section__email"><img src="./images/icon-mail.png" alt="" /><span>14</span></a>
                <a class="section__arrow">集团账号</a>
                <a class="section__arrow">工具</a>
                <a class="section__arrow">支持</a>
                <a class="section__arrow">费用</a>
                <a class="section__arrow section__user"><img src="./images/icon-user.png" alt="" /></a>
            </section>
        </div>
    </div>

    <div class="app-container">
        <div class="container__group">
            <div class="group__item " ><span>产品管理</span></div>
            <div class="group__item active" ><span>产品监控</span></div>
            <div class="group__item " ><span>产品运维</span></div>
        </div>

        <div class="container__main">
            <section>
                <div class="app-card product-resources">
                    <header><span>产品资源</span><a>更多产品</a></header>

                    <main>
                        <div class="main_item">
                            <img src="./images/monitor-images/矩形.png" alt="" />
                            <div class="item_info">
                                <div class="info_name text-overflow">对象存储</div>
                                <div class="info_sub-name text-overflow">安全稳定、便捷易用</div>
                            </div>
                        </div>
                        <div class="main_item">
                            <img src="./images/monitor-images/矩形(1).png" alt="" />
                            <div class="item_info">
                                <div class="info_name text-overflow">事件总线</div>
                                <div class="info_sub-name text-overflow">安全高效的事件管理平台</div>
                            </div>
                        </div>
                        <div class="main_item">
                            <img src="./images/monitor-images/矩形(2).png" alt="" />
                            <div class="item_info">
                                <div class="info_name text-overflow">Web 应用托管</div>
                                <div class="info_sub-name text-overflow">极速上线您的 Web 应用</div>
                            </div>
                        </div>
                        <div class="main_item">
                            <img src="./images/monitor-images/矩形(3).png" alt="" />
                            <div class="item_info">
                                <div class="info_name text-overflow">文件存储</div>
                                <div class="info_sub-name text-overflow">共享的文件存储服务</div>
                            </div>
                        </div>
                        <div class="main_item">
                            <img src="./images/monitor-images/矩形(4).png" alt="" />
                            <div class="item_info">
                                <div class="info_name text-overflow">产业分析</div>
                                <div class="info_sub-name text-overflow">全面产业分析</div>
                            </div>
                        </div>
                        <div class="main_item">
                            <img src="./images/monitor-images/矩形(5).png" alt="" />
                            <div class="item_info">
                                <div class="info_name text-overflow">LPWA 物联网络</div>
                                <div class="info_sub-name text-overflow">物联通讯接入服务</div>
                            </div>
                        </div>
                        <div class="main_item">
                            <img src="./images/monitor-images/矩形(6).png" alt="" />
                            <div class="item_info">
                                <div class="info_name text-overflow">金融资源聚合平台</div>
                                <div class="info_sub-name text-overflow">一站式运营管控平台</div>
                            </div>
                        </div>
                        <div class="main_item">
                            <img src="./images/monitor-images/矩形(7).png" alt="" />
                            <div class="item_info">
                                <div class="info_name text-overflow">集团账号管理</div>
                                <div class="info_sub-name text-overflow">多账号管理服务</div>
                            </div>
                        </div>
                    </main>
                </div>








                <div class="app-card colud-server">
                    <header><span>云服务器</span></header>

                    <main>
                        <div class="main_item">
                            <section>
                                <div class="section_name">总数量</div>
                                <div class="section_value">
                                    <span>100</span>
                                    <span>台</span>
                                </div>
                            </section>
                        </div>
                        <div class="main_item">
                            <section>
                                <div class="section_name">运行中</div>
                                <div class="section_value">
                                    <span>48</span>
                                    <span>台</span>
                                </div>
                            </section>
                        </div>
                        <div class="main_item">
                            <section>
                                <div class="section_name">安全隔离</div>
                                <div class="section_value">
                                    <span>10</span>
                                    <span>台</span>
                                </div>
                            </section>
                        </div>
                        <div class="main_item">
                            <section>
                                <div class="section_name">已过期</div>
                                <div class="section_value">
                                    <span class="status--error">10</span>
                                    <span>台</span>
                                </div>
                            </section>
                        </div>
                        <div class="main_item">
                            <section>
                                <div class="section_name">即将过期</div>
                                <div class="section_value">
                                    <span class="status--warn">32</span>
                                    <span>台</span>
                                </div>
                            </section>
                        </div>
                    </main>
                </div>




                <div class="app-card account-event">
                    <header>
                        <span>账号关键事件</span>
                        <div class="header_search">
                            <input type="text" placeholder="输入搜索内容" />
                            <img src="./images/monitor-images/形状.png" alt="" />
                        </div>
                    </header>

                    <main>
                        <div class="section_table">
                            <table>
                                <thead>
                                    <td>事件名</td>
                                    <td>用户名</td>
                                    <td>资源名</td>
                                    <td>类型</td>
                                    <td class="sort-time">
                                        <span>交易时间</span>
                                        <div>
                                            <img src="./images/monitor-images/icon_arrow(1).png" alt="" />
                                            <img src="./images/monitor-images/icon_arrow(2).png" alt="" />
                                        </div>
                                    </td>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>ConsoleLogin（登录）</td>
                                        <td>100005848809（root）</td>
                                        <td>account/100005848809</td>
                                        <td>account（账号中心）</td>
                                        <td>2021/2/21 12:25</td>
                                    </tr>
                                    <tr>
                                        <td>GetAccountDeactivationnfo （拉取账号注销状态）</td>
                                        <td>100005848809（root）</td>
                                        <td>account/100005848809</td>
                                        <td>account（账号中心）</td>
                                        <td>2021/2/21 12:20</td>
                                    </tr>
                                    <tr>
                                        <td>ConsoleLogin（登录）</td>
                                        <td>100005848809（root）</td>
                                        <td>account/100005848809</td>
                                        <td>account（账号中心）</td>
                                        <td>2021/2/21 12:12</td>
                                    </tr>
                                    <tr>
                                        <td>GetAccountDeactivationnfo （拉取账号注销状态）</td>
                                        <td>100005848809（root）</td>
                                        <td>account/100005848809</td>
                                        <td>account（账号中心）</td>
                                        <td>2021/2/21 12:10</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="section_pagination">
                            <span>共 20 条</span>
                            <div class="pagination_select"><span>10</span><img src="./images/monitor-images/icon_arrow(2).png" alt="" /></div>
                            <span class="pagination_size">条/页</span>
                            <button><img src="./images/monitor-images/Page 1(1).png" alt="" /></button>
                            <button class="active"><span>1</span></button>
                            <button><span>2</span></button>
                            <button><span>3</span></button>
                            <button><span>...</span></button>
                            <button><span>20</span></button>
                            <button><img src="./images/monitor-images/Page 1.png" alt="" /></button>
                            <span class="pagination_goto">前往</span>
                            <input type="text" value="1" />
                            <span class="pagination_page">页</span>
                        </div>
                    </main>
                </div>





                <div class="app-card domain-name">
                    <header>
                        <span>域名管理</span>
                        <span>
                            <a>域名转入</a>
                            <a>域名注册</a>
                        </span>
                    </header>

                    <main>
                        <div class="main_item">
                            <section>
                                <div class="section_name">总数量</div>
                                <div class="section_value">
                                    <span>40</span>
                                    <span>个</span>
                                </div>
                            </section>
                        </div>
                        <div class="main_item">
                            <section>
                                <div class="section_name">待续费</div>
                                <div class="section_value">
                                    <span class="status--warn">10</span>
                                    <span>个</span>
                                </div>
                            </section>
                        </div>
                        <div class="main_item">
                            <section>
                                <div class="section_name">待续回</div>
                                <div class="section_value">
                                    <span class="status--error">10</span>
                                    <span>个</span>
                                </div>
                            </section>
                        </div>
                        <div class="main_item">
                            <section>
                                <div class="section_name">未认证</div>
                                <div class="section_value">
                                    <span class="status--warn">20</span>
                                    <span>个</span>
                                </div>
                            </section>
                        </div>
                    </main>
                </div>
            </section>









            <section>
                <div class="app-card host-security">
                    <header><span>主机安全评分</span></header>

                    <main>
                        <div class="main_card">
                            <figure>
                                <div class="figure_round">
                                    <div class="round_left"></div>
                                    <div class="round_right"></div>
                                </div>
                                <div class="figure_text">
                                    <span>90</span>
                                    <span>分</span>
                                </div>
                            </figure>
                            <figcaption>
                                <div class="figcaption_text"><span>您的服务器发现</span><span class="text-number">2个</span><span>风险</span></div>

                                <button><span>查看详情</span></button>
                            </figcaption>
                        </div>
                    </main>

                    <footer>
                        <div class="main_item">
                            <section>
                                <div class="section_name">木马风险</div>
                                <div class="section_value">
                                    <span>2</span>
                                    <span>个</span>
                                </div>
                            </section>
                        </div>
                        <div class="main_item">
                            <section>
                                <div class="section_name">漏洞风险</div>
                                <div class="section_value">
                                    <span>0</span>
                                    <span>个</span>
                                </div>
                            </section>
                        </div>
                        <div class="main_item">
                            <section>
                                <div class="section_name">攻击风险</div>
                                <div class="section_value">
                                    <span>0</span>
                                    <span>个</span>
                                </div>
                            </section>
                        </div>
                    </footer>
                </div>







                <div class="app-card resources-monitor">
                    <header><span>资源监控</span></header>

                    <main>
                        <div class="main_item">
                            <section>
                                <div class="section_name">24小时异常</div>
                                <div class="section_value">
                                    <span class="status--error">2</span>
                                    <span>个</span>
                                </div>
                            </section>
                        </div>
                        <div class="main_item">
                            <section>
                                <div class="section_name">近7天警告</div>
                                <div class="section_value">
                                    <span>0</span>
                                    <span>个</span>
                                </div>
                            </section>
                        </div>
                    </main>
                </div>






                <div class="app-card colud-helper">
                    <header><span>企业云助手</span></header>

                    <main>
                        <div class="main_code">
                            <img src="./images/monitor-images/编组 10.png" alt="" />
                            <img src="./images/monitor-images/矩形@2x.png" alt="" />
                        </div>

                        <div class="main_text">使用微信扫码打开</div>
                        <div class="main_text">关注企业云官方微信公众号</div>
                    </main>

                    <footer>
                        <div class="footer--wrap">企业云为开发者提供移动管理工具，帮助开发者在手机上快捷管理云资源和云账户，高效管理</div>
                    </footer>
                </div>










                <div class="app-card developer-tool">
                    <header><span>开发者工具</span></header>

                    <main>
                        <div class="main_item">
                            <div class="item_info">
                                <span>API Explorer</span>
                                <img src="./images/monitor-images/下载.png" alt="" />
                            </div>
                        </div>
                        <div class="main_item">
                            <div class="item_info">
                                <span>开发者实验室</span>
                                <img src="./images/monitor-images/下载.png" alt="" />
                            </div>
                        </div>
                        <div class="main_item">
                            <div class="item_info">
                                <span>命令行工具</span>
                                <img src="./images/monitor-images/下载.png" alt="" />
                            </div>
                        </div>
                        <div class="main_item">
                            <div class="item_info">
                                <span>云+社区</span>
                                <img src="./images/monitor-images/下载.png" alt="" />
                            </div>
                        </div>
                        <div class="main_item">
                            <div class="item_info">
                                <span>开发者检测</span>
                                <img src="./images/monitor-images/下载.png" alt="" />
                            </div>
                        </div>
                        <div class="main_item">
                            <div class="item_info">
                                <span>API信息库</span>
                                <img src="./images/monitor-images/下载.png" alt="" />
                            </div>
                        </div>
                        <div class="main_item">
                            <div class="item_info">
                                <span>资源库</span>
                                <img src="./images/monitor-images/下载.png" alt="" />
                            </div>
                        </div>
                        <div class="main_item">
                            <div class="item_info">
                                <span>组件代码库</span>
                                <img src="./images/monitor-images/下载.png" alt="" />
                            </div>
                        </div>
                    </main>
                </div>
            </section>
        </div>
    </div>
</body>
</html>